feat: Tailwind 마이그레이션 및 FSD 아키텍처 리팩토링 by sumi-0011 · Pull Request #373 · git-goods/git-animal-client

sumi-0011 · 2026-04-01T10:58:04Z

Summary

PandaCSS → Tailwind CSS 마이그레이션 (랜딩, cherry-blossom 데모 등)
FSD(Feature-Sliced Design) 하이브리드 아키텍처로 apps/web 폴더 구조 리팩토링
- shared/, entities/, features/, widgets/ 레이어 도입
- 레거시 코드 정리 (InterceptingDialog 삭제, PersonaListToolbar 이전 등)
ui-tailwind 공통 컴포넌트 추가 (ConfirmDialog, AlertDialog)
Storybook 스토리 추가 및 Chromatic 배포 설정
Dialog 디자인 통일 및 RouteModal gap prop 추가

Test plan

pnpm build:web 빌드 정상 확인
주요 페이지 동작 확인 (랜딩, 마이페이지, 길드, 상점)
Storybook 컴포넌트 렌더링 확인
Chromatic 배포 워크플로우 확인

🤖 Generated with Claude Code

Tailwind fontSize 설정이 fontFamily를 지원하지 않는 한계를 플러그인으로 해결하여, text-glyph-* 클래스 사용 시 font-product 없이도 Product Sans가 자동 적용되도록 함 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

# Conflicts: # apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/QuizTypeCard.tsx # apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/SolveQuizConfirmDialog.tsx # apps/web/src/app/[locale]/game/quiz/create/_components/QuizCreateForm.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/done/CompleteAlertDialog.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/fail/FailAlertDialog.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx # apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx # apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx # apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx # apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx # apps/web/src/app/[locale]/landing/Footer/Footer.style.ts # apps/web/src/app/[locale]/landing/MainSection/MainSection.style.ts # apps/web/src/app/[locale]/landing/MainSection/MainSection.tsx # apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx # apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx # apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx # apps/web/src/app/[locale]/mypage/PersonaList.tsx # apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/page.tsx # apps/web/src/app/[locale]/shop/_auction/index.tsx # apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx # apps/web/src/components/CardGame/FanDrawingGame/FanDrawingGame.tsx # apps/web/src/components/Guild/MemeberSlider.tsx

ui-panda Dialog API와 맞추기 위해 ui-tailwind Dialog에 누락된 서브컴포넌트와 prop을 추가하고, quiz 컴포넌트에서 참조하는 ConfirmDialog 컴포넌트를 생성하여 type-check 오류 해결 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

# Conflicts: # apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx # apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx # apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx # apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx # apps/web/src/components/Guild/MemeberSlider.tsx

Stories files reference @storybook/react types which are not available during the library type-check. Excluding them follows the standard pattern of separating storybook config from library builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Made-with: Cursor

… 제거) Made-with: Cursor

Made-with: Cursor

- shared/: constants, utils, hooks, lib, store, i18n, styles, auth, interceptor 통합 - entities/: persona(UI+model), guild(UI), user(model), product(model) 분리 - features/: auction, change-persona-visible, feedback, laboratory-feedback, auth 분리 - widgets/: GNB 위젯 분리 - apis/ 레거시 디렉토리 완전 제거, shared/api/로 인프라 이전 의존성 흐름: app → widgets → features → entities → shared Made-with: Cursor

- apps/web/ARCHITECTURE.md: 레이어 구조, 의존성 규칙, 코드 배치 기준 상세 가이드 - CLAUDE.md: FSD 아키텍처 참조, outdated 정보 업데이트 (PandaCSS→Tailwind, apis/→FSD) - .cursor/rules/web-fsd-architecture.mdc: apps/web 파일 편집 시 자동 적용되는 FSD 규칙 Made-with: Cursor

FSD 리팩토링으로 이동된 경로 반영 Made-with: Cursor

i18n/이 src/shared/i18n/으로 이동 후 messages 경로가 ../../messages/ → ../../../messages/로 변경 필요 Made-with: Cursor

# Conflicts: # .gitignore # apps/web/package.json # apps/web/src/app/[locale]/game/quiz/_components/MobileLayout.tsx # apps/web/src/app/[locale]/guild/(subpage)/[id]/MoreMenu.tsx # apps/web/src/app/[locale]/guild/(subpage)/create/page.tsx # apps/web/src/app/[locale]/guild/(subpage)/detail/[id]/join/page.tsx # apps/web/src/app/[locale]/guild/_components/GuildModalPageLayout.tsx # apps/web/src/app/[locale]/guild/layout.tsx # apps/web/src/app/[locale]/laboratory/layout.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSlider.style.ts # apps/web/src/app/[locale]/landing/AvailablePetSection/AnimalSlider.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx # apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx # apps/web/src/app/[locale]/mypage/ProfileSection.tsx # apps/web/src/app/[locale]/mypage/layout.tsx # apps/web/src/app/[locale]/mypage/my-pet/(evolution)/EvolutionPersona.tsx # apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx # apps/web/src/app/[locale]/shop/_auction/Tab.tsx # apps/web/src/app/[locale]/shop/_auction/index.tsx # apps/web/src/components/GNB/Notification/InboxList.tsx # apps/web/src/components/PageModal/index.tsx # apps/web/src/styles/prevTextToken.ts # apps/web/src/styles/scrollStyle.ts # packages/ui/tailwind/src/components/ui/dialog.tsx # packages/ui/tailwind/src/theme/screens.ts # pnpm-lock.yaml

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- @gitanimals/ui-tailwind에 ConfirmDialog, AlertDialog 생성 - laboratory 로컬 ConfirmDialog/AlertDialog 삭제 - Quiz, Mypage 사용처를 공통 컴포넌트로 교체 - useDialog hook 내부를 공통 컴포넌트 활용하도록 리팩토링 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

RouteModal로 통합 완료되어 더 이상 사용되지 않는 InterceptingDialog를 제거한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

삭제된 InterceptingDialog의 gap-8 레이아웃을 지원하기 위해 RouteModal에 gap prop('sm' | 'lg')을 추가한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- chromatic 패키지 설치 - dev 브랜치 push 시 자동 배포 워크플로우 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- render + useState 제거, isOpen: true를 meta args에 설정 - TS 에러 해결 (필수 props를 meta args에서 기본값 제공) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- gap-2, 반응형 타이틀, children 래퍼, mt-2 버튼 영역 적용 - 미사용 cn import 제거 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-04-01T10:58:11Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9e8e69fb-58f1-4211-8934-b7add1701667

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/tailwind-dev

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sumi-0011 and others added 30 commits January 14, 2026 09:42

refactor: tailwind setting migration

c38c939

feat: landing 페이지 개선

bfb5740

feat: custom token error fix

e6a0d2c

refactor: ui panda 참조 제거

9875ff1

fix: dialog 수정

fac5c95

feat: tailwind 패키지 스토리북 추가

91aff0f

Merge branch 'main' into dev

4f94218

fix: layout fix

16ad68c

docs: my-pet 페이지 동작 정리 및 진화 모달 미사용 코드 제거

f612c68

Made-with: Cursor

refactor: PersonaListToolbar를 ui-tailwind SearchBar·Select로 전환 (Panda…

6dc0fab

… 제거) Made-with: Cursor

refactor: PersonaItem을 ui-tailwind Banner·LevelBanner로 전환 (Panda 제거)

c0e3735

Made-with: Cursor

fix: 판매 확인 Dialog 푸터 버튼 겹침 (flex 레이아웃)

a15ee67

Made-with: Cursor

fix: next-intl i18n request 경로를 shared/i18n/으로 수정

97d85c6

FSD 리팩토링으로 이동된 경로 반영 Made-with: Cursor

fix: i18n messages 동적 import 상대 경로 수정

09d4264

i18n/이 src/shared/i18n/으로 이동 후 messages 경로가 ../../messages/ → ../../../messages/로 변경 필요 Made-with: Cursor

refactor: Spring 랜딩 페이지 PandaCSS → Tailwind CSS 마이그레이션

827ac67

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix: cherry-blossom 데모 PandaCSS 제거 및 SelectPersonaList 중복 함수 수정

da3a83b

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: 미사용 InterceptingDialog 컴포넌트 삭제

955369a

RouteModal로 통합 완료되어 더 이상 사용되지 않는 InterceptingDialog를 제거한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: RouteModal에 gap prop 추가 (InterceptingDialog 통합)

cf4ac6b

삭제된 InterceptingDialog의 gap-8 레이아웃을 지원하기 위해 RouteModal에 gap prop('sm' | 'lg')을 추가한다. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: ConfirmDialog, AlertDialog 스토리북 스토리 추가

48b7d34

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: Chromatic 스토리북 배포 설정 추가

e8645da

- chromatic 패키지 설치 - dev 브랜치 push 시 자동 배포 워크플로우 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: ConfirmDialog/AlertDialog 스토리 기본 열림 상태로 변경

da42fc8

- render + useState 제거, isOpen: true를 meta args에 설정 - TS 에러 해결 (필수 props를 meta args에서 기본값 제공) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: AlertDialog 디자인을 ConfirmDialog와 동일하게 통일

1c6fa3c

- gap-2, 반응형 타이틀, children 래퍼, mt-2 버튼 영역 적용 - 미사용 cn import 제거 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sumi-0011 requested a review from hyesungoh as a code owner April 1, 2026 10:58

auto-assign Bot assigned sumi-0011 Apr 1, 2026

github-actions Bot added area: Web area: Workflow diff: XL area: UI labels Apr 1, 2026

fix: apps/web에서 삭제된 panda codegen prepare/prebuild 스크립트 제거

7df6960

sumi-0011 merged commit 81f642f into dev Apr 2, 2026
5 checks passed

sumi-0011 deleted the feat/tailwind-dev branch April 2, 2026 10:57

github-actions Bot mentioned this pull request Apr 2, 2026

[RELEASE] v2.10.0 git-good-w/git-animal-client#35

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Tailwind 마이그레이션 및 FSD 아키텍처 리팩토링#373

feat: Tailwind 마이그레이션 및 FSD 아키텍처 리팩토링#373
sumi-0011 merged 32 commits into
devfrom
feat/tailwind-dev

sumi-0011 commented Apr 1, 2026

Uh oh!

coderabbitai Bot commented Apr 1, 2026 •

edited

Loading

Review skipped

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

sumi-0011 commented Apr 1, 2026

Summary

Test plan

Uh oh!

coderabbitai Bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented Apr 1, 2026 •

edited

Loading